<template>
  <div :class="{ avatar: true, 'show-y': showY }">
    <div class="a-img">
      <template v-if="type === 'user'">
        <el-avatar v-if="src" :size="size" :src="src" />
        <div v-else :style="{ '--bgc': bgc, '--size': size + 'px' }">
          <span>{{ alisa }}</span>
        </div>
      </template>
      <el-avatar v-else-if="type === 'dept'" style="background: #f78f5f" :icon="Histogram" :size="size"/>
      <el-avatar v-else icon="el-icon-userfilled" style="background: #576a95" :size="size"/>
      <el-icon v-if="closeable" @click="close"><Close /></el-icon>
      <icon :name="`${statusIcon} status`" v-show="status"></icon>
    </div>
    <div class="name" v-if="!showY && showName">{{ name }}</div>
    <ellipsis hoverTip class="name" v-show="showName" :style="{ width: size + 10 + 'px' }" :content="name" v-else/>
  </div>
</template>

<script>
import {computed, toRefs} from 'vue'
import { Close, Histogram } from '@element-plus/icons-vue'
export default {
    name: 'Avatar',
    install(Vue) {
        window.$vueApp.component('avatar', this)
    },
    components: {
        Close
    },
    props: {
        type: {
            type: String,
            default: 'user',
        },
        name: {
            type: String,
            default: '未知',
        },
        size: {
            type: Number,
            default: 40,
        },
        src: {
            type: String,
            default: undefined,
        },
        bgc: {
            type: String,
            default: '#1989fa',
        },
        square: {
            type: Boolean,
            default: false,
        },
        showY: {
            type: Boolean,
            default: false,
        },
        showName: {
            type: Boolean,
            default: true,
        },
        closeable: {
            type: Boolean,
            default: false,
        },
        status: {
            type: String,
        },
    },
    emits: ['close'],
    setup(props, context) {
        const {status, name} = toRefs(props)
        const alisa = computed(() => {
            return name.value.length > 2
            ? name.value.substring(name.value.length - 2, name.value.length)
            : name.value
        })
        const statusIcon = computed(() => {
            switch (status.value) {
                case 'error':
                    return 'el-icon-circleclosefilled error'
                case 'pending':
                    return 'pending iconfont icon-dengdaizhongbeifen'
                case 'success':
                    return 'el-icon-successfilled success'
                case 'cc':
                    return 'el-icon-promotion cc'
                case 'comment':
                    return 'comment iconfont icon-xiaoxi'
                case 'transfer':
                    return 'transfer iconfont icon-zhuanyi'
                case 'cancel':
                    return 'cancel iconfont icon-fanhui-chehui-06'
                case 'recall':
                    return 'recall iconfont icon-quxiao'
                case 'leader':
                    return 'el-icon-userfilled leader'
                default:
                    return null
            }
        })
        const close = () => {
            context.emit('close')
        }
        return {
            alisa,
            statusIcon,
            close,
            Histogram
        }
    }
}
</script>

<style>

</style>
